<template>
    <div v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在修改..." >
        <el-button link type="primary" size="small" @click="updateClick()" :disabled="subject.status === 1">修改</el-button>
        <el-dialog v-model="UpdateDialogVisible" title="修改题目预览" width="30%" @close="cancelUpdateClick()"
            :close-on-click-modal="false" :append-to-body="true">

            <span>
                <el-form label-position="right" label-width="100px" style="max-width: 460px">
                    <el-form-item label="题目类型">
                        <span>
                            <el-select v-model="subject.subjectTypeId" class="m-2" placeholder="好像没有数据哎😔">
                                <el-option :label="item.subjectTypeName" :value="item.subjectTypeId"
                                    v-for="item in store.state.questionBank.subjectModel.subjectPagination.subjectTypeList"
                                    :key="item.subjectTypeId" />
                            </el-select>
                        </span>
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="题目">
                        <el-input v-model="subject.subjectTitle" :rows="4" type="textarea" placeholder="好像没有数据哎😔" />
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="选项答案" v-if="subject.subjectTypeId != 2">
                        <el-input v-model="item.content" v-for="item in subject.subjectOptionAnswer" :key="item.id">
                            <template #prepend>
                                <span style="width:10px">
                                    {{ item.id }}
                                </span>
                            </template>

                        </el-input>
                        <el-space :size="0">
                            <el-button :icon="Plus" style="width:auto" @click="addXuanXiang()"></el-button>
                            <el-button :icon="SemiSelect" style="width:auto" @click="jianXuanXiang()"
                                :disabled="subject.subjectOptionAnswer.length <= 1"></el-button>
                        </el-space>

                    </el-form-item>
                    <el-form-item label="选项答案" v-if="subject.subjectTypeId == 2">
                        <el-input v-model="item.content" v-for="item in subject.subjectOptionAnswer" :key="item.id"
                            :readonly="true">
                            <template #prepend>
                                <span style="width:10px">
                                    {{ item.id }}
                                </span>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="正确答案" v-if="subject.subjectTypeId == 1">
                        <el-select v-model="subject.subjectRightKey[0]" class="m-2" placeholder="好像没有数据哎😔">
                            <el-option :label="item.id" :value="item.id" v-for="item in subject.subjectOptionAnswer"
                                :key="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="正确答案" v-if="subject.subjectTypeId == 2">
                        <el-select v-model="subject.subjectRightKey[0]" class="m-2" placeholder="好像没有数据哎😔">
                            <el-option :label="item.id" :value="item.id" v-for="item in subject.subjectOptionAnswer"
                                :key="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="正确答案" v-if="subject.subjectTypeId == 3">
                        <el-select v-model="subject.subjectRightKey" class="m-2" placeholder="好像没有数据哎😔" :multiple="true">
                            <el-option :label="item.id" :value="item.id" v-for="item in subject.subjectOptionAnswer"
                                :key="item.id" />
                        </el-select>
                    </el-form-item>
                    <el-divider />
                    <el-form-item label="备注">
                        <el-input v-model="subject.updateOperationRecordRemarks" :rows="4" type="textarea" placeholder="好像没有数据哎😔" />
                    </el-form-item>
                </el-form>

            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelUpdateClick()">取消</el-button>
                  <el-tooltip
                      class="box-item"
                      effect="dark"
                      content="题目不能为空"
                      placement="bottom"
                      :disabled="!(subject.subjectTitle ==='')"
                  >
                    <el-button type="primary" @click="keepUpdateClick()" :disabled="subject.subjectTitle ===''">保存</el-button>
                  </el-tooltip>

                </span>
            </template>
        </el-dialog>
        <!-- 选择类型 -->
        <el-dialog v-model="selectSubjectTypeShow" title="选择类型" width="20%" :show-close="false"
            :close-on-click-modal="false" :append-to-body="true">
            <span>类型为>>>{{ accountTypeId == null ? '' : accountTypeId.industryName }}</span>
            <el-divider />
            <span>
                <el-scrollbar height="200px">
                    <TreeCommponent :treeData="store.state.questionBank.subjectModel.subjectTypeTreeData"
                        @treeComponent="treeComponent" :defaultExpandAll="false" :showCheckBox="false" v-if="showTree">
                    </TreeCommponent>
                </el-scrollbar>

            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="selectCancelClick()">取消</el-button>
                    <el-button type="primary" @click="selectKeepUpdateClick()" :disabled="showButtonOfSelectType">确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { useStore } from 'vuex'
import { SemiSelect, Plus } from '@element-plus/icons-vue'
import { ElNotification, ElMessage } from 'element-plus'
import { watch } from '@vue/runtime-core'
import axios from 'axios';
export default {
    props:['updateSubject'],
    setup(props){
        const store = new useStore()
        //父组件值得获取
        const subject = reactive({
            subjectId:null,
            subjectTitle:'',
            accountTypeId:null,
            subjectTypeId:null,
            subjectOptionAnswer:[],
            subjectRightKey:[],
            updateOperationRecordRemarks:'',
            status:null,
        })
        /*let status = ref()
        status.value = props.updateSubject.status*/
        subject.status = props.updateSubject.status
        watch(()=>props.updateSubject,(newVal)=>{
          //console.log(newVal)
         /* status.value = newVal.status*/
          subject.status = newVal.status
        },{
          deep:true
        })
        /* watch(()=>props.updateSubject,(newVal,oldVal)=>{
            console.log(newVal)
            dataTransformation(newVal)
        },{
            deep:true
        }) */
        //值转换方法
        function dataTransformation(newVal){
            subject.subjectId = newVal.subjectId
            subject.subjectTitle = newVal.subjectTitle
            subject.subjectTypeId = newVal.subjectTypeId
            subject.accountTypeId = newVal.accountTypeId
            subject.subjectOptionAnswer = JSON.parse(newVal.subjectOptionAnswer)
            subject.subjectRightKey = newVal.subjectRightKey.split(",")
            subject.updateOperationRecordRemarks = newVal.updateOperationRecordRemarks
            subject.status = newVal.status
        }
        //值初始化
        function dataInitialization(){
            subject.subjectId=null
            subject.subjectTitle=''
            subject.accountTypeId=null
            subject.subjectTypeId=null
            subject.subjectOptionAnswer=[]
            subject.subjectRightKey=[]
            subject.updateOperationRecordRemarks=''
        }
        //***************************************************** */
        //弹出层开关
        let UpdateDialogVisible = ref(false)
        //点击修改，代开修改弹出层
        function updateClick(){
            dataTransformation(props.updateSubject)
            UpdateDialogVisible.value = true
        }
        //弹出层关闭按钮
        function cancelUpdateClick(){
            UpdateDialogVisible.value = false
            //点击取消要将本组件数据初始化一下
            dataInitialization()
        }
        //弹出层保存按钮
        function keepUpdateClick(){
            selectSubjectTypeShow.value = true
            showTree.value = true
        }
        //监听器，监听用户选择的题型
        watch(()=>subject.subjectTypeId, (newVal) => {
            //console.log(updateDigData.value.type);
            if (newVal == 2) {
                subject.subjectOptionAnswer = [{ "id": "A", "content": "对" }, { "id": "B", "content": "错" }];
                subject.subjectRightKey = ["A"];
            }
            else {
                if (newVal == props.updateSubject.subjectTypeId) {
                    subject.subjectOptionAnswer = JSON.parse(props.updateSubject.subjectOptionAnswer);
                    subject.subjectRightKey = props.updateSubject.subjectRightKey.split(",");
                }
                else {
                    subject.subjectOptionAnswer = [{ "id": "A", "content": "" }];
                    subject.subjectRightKey = ["A"];
                }
            }
        }, {
            deep: true,
            immediate: false
        });
        //***************************************************** */
        //添加一个选项按钮
        function addXuanXiang(){
            let acCode = String.fromCharCode(subject.subjectOptionAnswer[subject.subjectOptionAnswer.length - 1].id.charCodeAt(0) + 1);
            subject.subjectOptionAnswer.push({"id":acCode,"content":""})
        }
        //减一个题目选项按钮
        function jianXuanXiang(){
            subject.subjectOptionAnswer.splice(subject.subjectOptionAnswer.length - 1, 1);
        }
        //**************************************************** */
        //选择类型得开关
        let selectSubjectTypeShow = ref(false)
        //接收tree组件的值
        let accountTypeId = ref(null)
        //销毁tree组件
        let showTree = ref(false)
        //tree组件传值方法
        function treeComponent(a){
            if(!a.level){
                accountTypeId.value = a
                showButtonOfSelectType.value = false
            }else{
                accountTypeId.value = null
                showButtonOfSelectType.value = true
            }
        }
        //选择类型弹出层取消按钮
        function selectCancelClick(){
            showButtonOfSelectType.value = true
            showTree.value = false
            selectSubjectTypeShow.value = false
            accountTypeId.value = null
        }
         //选择类型弹出层保存按钮
         function selectKeepUpdateClick(){
            let data = {
                subject: {
                    subjectId:subject.subjectId,
                    accountTypeId:accountTypeId.value.industryId,
                    subjectTitle:subject.subjectTitle,
                    subjectOptionAnswer:JSON.stringify(subject.subjectOptionAnswer),
                    subjectRightKey:subject.subjectRightKey.toString(),
                    subjectTypeId:subject.subjectTypeId 
                },
                operationRecordRemarks:subject.updateOperationRecordRemarks, 
                accountTypeId:subject.accountTypeId,
                subjectPageDTO: {
                    subjectTypeId: store.state.questionBank.subjectModel.subjectPagination.subjectTypeId,
                    accountTypeId: store.state.questionBank.subjectModel.subjectPagination.accountTypeId,
                    status: store.state.questionBank.subjectModel.subjectPagination.status,
                    pageNumber: store.state.questionBank.subjectModel.subjectPagination.pageNum,
                    pageSize: store.state.questionBank.subjectModel.subjectPagination.pageSize
                }
            }
            fullscreenLoading.value = true
            axios.put("/api/subject/updateOneSubject",JSON.stringify(data),{
                headers:{
                    'Content-Type':'application/json;charset=UTF-8'
                }
            }).then((response)=>{
                if (response.status == 200) {
                    if (response.data.code == 200) {
                        store.commit('selectSubjectTableData', response.data.data.list)
                        store.commit('selectSubjectTableTotal', response.data.data.total)
                        ElNotification({
                            title: '操作成功',
                            message: '添加成功',
                            type: 'success',
                        })
                        //********************* */
                        showTree.value = false
                        selectSubjectTypeShow.value = false
                        UpdateDialogVisible.value = false//关闭弹出层
                        
                    } else {
                        ElNotification({
                            title: '操作失败',
                            message: '修改失败',
                            type: 'error',
                        })
                    }
                } else {
                    ElNotification({
                        title: '操作异常',
                        message: '修改异常',
                        type: 'warring',
                    })
                }
            }).finally(()=>{
                fullscreenLoading.value = false
            })
         }
         //确认按钮禁用
         let showButtonOfSelectType = ref(true)
         //加载
         let fullscreenLoading = ref(false)
        return {
            subject,
            UpdateDialogVisible,
            fullscreenLoading,
            selectSubjectTypeShow,
            accountTypeId,
            store,
            showButtonOfSelectType,
            showTree,
            SemiSelect,
            Plus,
          status,
            updateClick,
            treeComponent,
            cancelUpdateClick,
            keepUpdateClick,
            addXuanXiang,
            jianXuanXiang,
            selectCancelClick,
            selectKeepUpdateClick
        }
    }
}
</script>

<style>
</style>